<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
window.onload=function(){

var canvas=document.getElementById("canvas");
var cx=canvas.getContext("2d");
cx.fillStyle="rgba(190,36,120,0.3)"
cx.strokeStyle="red"
cx.translate(300,300)
for(i=0;i<20;i++){
    cx.translate(-30,-30);
    cx.scale(0.9,0.9)
    cx.beginPath();
    cx.arc(0,0,130,0,Math.PI*2);
    cx.closePath();
    cx.fill();
}



//试验

// var g=cx.createRadialGradient(200,200,20,250,200,120);
// // g.addColorStop(0.2,"rgb(160,23,150)")
// // g.addColorStop(0.4,"rgb(160,50,150)");
// // g.addColorStop(0.6,"rgb(160,80,150)");
// // g.addColorStop(0.8,"rgb(160,120,150)");
// // g.addColorStop(1,"rgb(160,150,150)");
//  g.addColorStop(0.3,"red");
//  g.addColorStop(0.7,"green");
//  g.addColorStop(0.8,"blue");
// cx.fillStyle=g;
// cx.beginPath();
// cx.arc(200,200,100,0,Math.PI*2)
// cx.closePath();
// cx.fill();












}
    </script>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px" style="background-color: pink;"></canvas>
</body>
</html>